<script setup lang="ts">
import * as echarts from 'echarts';
import {computed, onMounted, watch, ref, onUnmounted} from "vue";
import {useSpinStore} from "@/store/system/spinStore";

type EChartsOption = echarts.EChartsOption;

let spinStore = useSpinStore();
const spinning = computed(() => spinStore.loading);

const timer = ref<any>(null)

watch(() => spinning.value, (newValue) => {
  if (newValue) {
    timer.value = setTimeout(initChart, 500)
  } else {
    clearTimeout(timer.value)
  }
})

function initChart() {
  let chartDom = document.getElementById('YuanMain');
  let myChart = echarts.init(chartDom);
  let option: EChartsOption = {
    graphic: {
      elements: [
        {
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
            text: '风 起 社 区',
            fontSize: 120,
            fontWeight: 600,
            lineDash: [0, 200],
            lineDashOffset: 0,
            fill: 'transparent',
            stroke: 'hsl(359deg 83% 75%)',
            lineWidth: 1
          },
          keyframeAnimation: {
            duration: 3000,
            loop: true,
            keyframes: [
              {
                percent: 0.7,
                style: {
                  fill: 'transparent',
                  lineDashOffset: 200,
                  lineDash: [200, 0]
                }
              },
              {
                // Stop for a while.
                percent: 0.8,
                style: {
                  fill: 'transparent'
                }
              },
              {
                percent: 1,
                style: {
                  fill: 'transparent'
                }
              }
            ]
          }
        }
      ]
    }
  };
  option && myChart.setOption(option);

}

onMounted(() => {
  timer.value = setTimeout(initChart, 500)
})
onUnmounted(() => {
  clearTimeout(timer.value)
})
</script>

<template>
  <section class="Yuan-loading fixed inset-0 z-[99999] h-full bg-[#F8F8F8]" v-if="spinning">
    <div class="Yuan-echarts h-full" id="YuanMain"></div>
  </section>
</template>

<style scoped lang="less">

</style>
